<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 基本表单</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> <link href="files/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="files/css/font-awesome.min.css" rel="stylesheet">
    <link href="files/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="files/css/animate.css" rel="stylesheet">
    <link href="files/css/style.css?v=4.1.0" rel="stylesheet">
    <script src="files/js/vue.js"></script>
    <style>
        #app {
            height: 100%;
            width: 100%;
        }
        .wrapper {
            width: 100%;
        }
        #detailBox {
            display: none;
            position: absolute;
            background: #f0f3f4;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }
        .searchInput {
            height: 34px;
        }
        .copyBtn {
            float: right;
            height: 100%;
            line-height: 1;
        }
        .ibox-title h5 {
            width: 80%;
            white-space: nowrap;
        }
        .ibox-title h5 input {
            border: none;
            background: none;
            width: 150px;
            font-weight: 500;
            display: inline-block;
        }
        .table-responsive {
            border: none;
        }

        @media screen and ( max-width: 400px ) {
            .copyBtn {
                display: none;
            }
        }
    </style>
</head>
<body class="gray-bg">
    <div id="app">
        <div class="wrapper wrapper-content" :style="{display:(isShowProfileDetail?'none':'block')}">
            <form action="javascript:;" class="form-horizontal" style="margin-bottom: 20px;">
                <div class="input-group col-sm-6 col-sm-offset-3 col-xs-12">
                    <input type="text" class="form-control searchInput" v-model="keywords"> 
                    <span class="input-group-btn"> 
                        <button type="button" class="btn btn-primary" @click="search()">搜索</button>
                    </span>
                </div>
            </form>
        
            <div class="ibox-content">
                <div class="table-responsive">
                    <table class="table table-striped companyDataTable">
                        <thead>
                            <tr>
                                <th>姓名</th>
                                <th>邀请码</th>
                                <th>手机号</th>
                                <th>累积总金额</th>
                                <th>可提金额</th>
                                <th>邀请码等级</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, idx) in profileList">
                                <td v-text="item.name"></td>
                                <td v-text="item.referral_code"></td>
                                <td v-text="item.username"></td>
                                <td v-text="item.amount_total/100"></td>
                                <td v-text="item.surplus_amount/100"></td>
                                <td v-text="inviteLevel[item.user_type_enums]"></td>
                                <td>
                                    <a href="javascript:;" @click="showDetail(idx)">查看详情</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li class="prevPage" @click="prevPage">
                            <a href="javascript:;" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li v-for="(item, idx) in totalPages" :class="{active:idx==(curPage-1)}" @click="jumpPage(idx+1)"><a href="javascript:;" v-text="item"></a></li>
                        <li class="nextPage" @click="nextPage">
                            <a href="javascript:;" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

        <div class="wrapper wrapper-content" id="detailBox" :style="{display:(!isShowProfileDetail?'none':'block')}">
            <div class="row">
                <div class="col-sm-12 text-right" style="margin-bottom: 10px;">
                    <button class="btn btn-default" type="button" @click="isShowProfileDetail=false">返回</button>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>   姓名：<input readonly="" :value="curProfile.name" style="margin-left:10px;"></input></h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>   手机号：<input readonly="" :value="curProfile.username" style="margin-left:10px;"></input></h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5> 总提成金额：<input readonly="" :value="curProfile.amount_total/100" style="margin-left:10px;"></input></h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>   可提金额：<input readonly="" :value="curProfile.surplus_amount/100" style="margin-left:10px;"></input></h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5> 邀请码：<input readonly="" :value="curProfile.referral_code" style="margin-left:10px;"></input></h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5> 邀请码等级：<input readonly="" :value="inviteLevel[curProfile.user_type_enums]" style="margin-left:10px;"></input></h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>   银行名称：<input readonly="" :value="curProfile.bank_name" style="margin-left:10px;"></input></h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5> 银行卡号：<input readonly="" :value="curProfile.bank_card_no" style="margin-left:10px;"></input></h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>   身份证号：<input readonly="" :value="curProfile.id_card_no" style="margin-left:10px;"></input></h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5> 推广店铺：<input readonly="" :value="curProfile.store_count" style="margin-left:10px;"></input></h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>   推荐人姓名：<input readonly="" :value="curProfile.parent_user" style="margin-left:10px;"></input></h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>   推荐人电话：<input readonly="" :value="curProfile.parent_user_name" style="margin-left:10px;"></input></h5>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-sm-11" style="margin: 10px;">
                        <button type="button" class="btn" :class="{'btn-primary':!isShowDakuan,'btn-default':isShowDakuan}" @click="isShowDakuan=false">提成记录</button>
                        <button type="button" class="btn" :class="{'btn-primary':isShowDakuan,'btn-default':!isShowDakuan}" @click="isShowDakuan=true">打款记录</button>

                        <button type="button" class="btn btn-danger" style="float: right;" @click="dakuanFinish">完成打款</button>
                    </div>
                </div>

                <!-- 提成列表 -->
                <div class="ibox-content" :style="{display:(!isShowDakuan?'block':'none')}">
                    <div class="table-responsive">
                        <table class="table table-striped companyDataTable">
                            <thead>
                                <tr>
                                    <th>提成金额</th>
                                    <th>店铺名称</th>
                                    <th>店铺充值时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, idx) in tichengList">
                                    <td>{{item.commission/100}}</td>
                                    <td v-text="item.store_name"></td>
                                    <td v-text="item.update_time"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <nav aria-label="Page navigation" class="text-right">
                        <ul class="pagination" style="margin: 0;">
                            <li class="prevPage" @click="tichengPrevPage">
                                <a href="javascript:;" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li v-for="(item, idx) in tichengTotalPages" :class="{active:idx==(tichengCurPage-1)}" @click="tichengJumpPage(idx+1)"><a href="javascript:;" v-text="item"></a></li>
                            <li class="nextPage" @click="tichengNextPage">
                                <a href="javascript:;" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
                
                <!-- 打款列表 -->
                <div class="ibox-content" :style="{display:(isShowDakuan?'block':'none')}">
                    <div class="table-responsive">
                        <table class="table table-striped companyDataTable">
                            <thead>
                                <tr>
                                    <th>打款时间</th>
                                    <th>打款金额</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, idx) in dakuanList">
                                    <td v-text="item.update_time"></td>
                                    <td v-text="item.amount/100"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <nav aria-label="Page navigation" class="text-right">
                        <ul class="pagination" style="margin: 0;">
                            <li class="prevPage" @click="dakuanPrevPage">
                                <a href="javascript:;" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li v-for="(item, idx) in dakuanTotalPages" :class="{active:idx==(dakuanCurPage-1)}" @click="dakuanJumpPage(idx+1)"><a href="javascript:;" v-text="item"></a></li>
                            <li class="nextPage" @click="dakuanNextPage">
                                <a href="javascript:;" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    
    

    <!-- 全局js -->
    <script src="files/js/jquery.min.js?v=2.1.4"></script>
    <script src="files/js/bootstrap.min.js?v=3.3.6"></script>

    <!-- 自定义js -->
    <script src="files/js/content.js?v=1.0.0"></script>

    <!-- iCheck -->
    <script src="files/js/plugins/iCheck/icheck.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                profileList: [],
                
                isShowProfileDetail: false,
                isShowDakuan: false, // 是否显示打款
                curProfile: {},
                curProfileIdx: 0,
                keywords: '',

                inviteLevel: {
                    "ZERO": '零级',
                    "ONE": '1级',
                    "TWO": '2级',
                },

                totalPages: 1,
                curPage: 1,

                tichengList: [],
                tichengTotalPages: 1, // 提成表总页数
                tichengCurPage: 1, // 提成表当前页数

                dakuanList: [],
                dakuanTotalPages: 1, // 打款表总页数
                dakuanCurPage: 1, // 打款表当前页数


            },
            methods: {
                jumpPage: function ( page ) {
                    let that = this;
                    $.ajax({
                        type: "GET",
                        url: "getProfileData?curPage="+page,
                        async: true,
                        success: function ( res ) {
                            that.profileList = res.data;
                            that.totalPages = res.totalPages;
                            that.curPage = page;
                        },
                        error: function (x, e) {

                        }
                    });
                },
                prevPage: function () {
                    if ( this.curPage <= 1 ) {
                        return;
                    } else {
                        let that = this;
                        $.ajax({
                            type: "GET",
                            url: "getProfileData?curPage="+(this.curPage-1),
                            async: true,
                            success: function ( res ) {
                                that.profileList = res.data;
                                that.totalPages = res.totalPages;
                                that.curPage = res.curPage;
                            },
                            error: function (x, e) {

                            }
                        });
                    }
                },
                nextPage: function () {
                    if ( this.curPage >= this.totalPages ) {
                        return;
                    } else {
                        let that = this;
                        $.ajax({
                            type: "GET",
                            url: "getProfileData?curPage="+(this.curPage+1),
                            async: true,
                            success: function ( res ) {
                                that.profileList = res.data;
                                that.totalPages = res.totalPages;
                                that.curPage = res.curPage;
                            },
                            error: function (x, e) {

                            }
                        });
                    }
                }, 

                tichengJumpPage: function ( page ) { // 提成跳转页面
                    let that = this;
                    $.ajax({
                        type: "GET",
                        url: "getTicheng?curPage="+this.tichengCurPage+'&username='+this.curProfile.username,
                        async: true,
                        success: function ( res ) {
                            that.tichengList = res.data;
                            that.tichengTotalPages = res.totalPages;
                            that.tichengCurPage = page;
                        },
                        error: function (x, e) {

                        }
                    });
                },
                tichengPrevPage: function () { // 提成上一页
                    if ( this.tichengCurPage <= 1 ) {
                        return;
                    } else {
                        let that = this;
                        $.ajax({
                            type: "GET",
                            url: "getTicheng?curPage="+(this.tichengCurPage-1)+'&username='+this.curProfile.username,
                            async: true,
                            success: function ( res ) {
                                that.tichengList = res.data;
                                that.tichengTotalPages = res.totalPages;
                                that.tichengCurPage = res.curPage;
                            },
                            error: function (x, e) {

                            }
                        });
                    }
                },
                tichengNextPage: function () { // 提成下一页
                    if ( this.tichengCurPage >= this.tichengTotalPages ) {
                        return;
                    } else {
                        let that = this;
                        $.ajax({
                            type: "GET",
                            url: "getTicheng?curPage="+(this.tichengCurPage+1)+'&username='+this.curProfile.username,
                            async: true,
                            success: function ( res ) {
                                that.tichengList = res.data;
                                that.tichengTotalPages = res.totalPages;
                                that.tichengCurPage = res.curPage;
                            },
                            error: function (x, e) {

                            }
                        });
                    }
                },

                dakuanJumpPage: function ( page ) { // 打款跳转页面
                    let that = this;
                    $.ajax({
                        type: "GET",
                        url: "getDakuan?curPage="+this.dakuanCurPage+'&username='+this.curProfile.username,
                        async: true,
                        success: function ( res ) {
                            that.dakuanList = res.data;
                            that.dakuanTotalPages = res.totalPages;
                            that.dakuanCurPage = page;
                        },
                        error: function (x, e) {

                        }
                    });
                },
                dakuanPrevPage: function () { // 打款上一页
                    if ( this.dakuanCurPage <= 1 ) {
                        return;
                    } else {
                        let that = this;
                        $.ajax({
                            type: "GET",
                            url: "getDakuan?curPage="+(this.dakuanCurPage-1)+'&username='+this.curProfile.username,
                            async: true,
                            success: function ( res ) {
                                that.dakuanList = res.data;
                                that.dakuanTotalPages = res.totalPages;
                                that.dakuanCurPage = res.curPage;
                            },
                            error: function (x, e) {

                            }
                        });
                    }
                },
                dakuanNextPage: function () { // 打款下一页
                    if ( this.dakuanCurPage >= this.dakuanTotalPages ) {
                        return;
                    } else {
                        console.log(this.dakuanCurPage);
                        console.log(this.dakuanTotalPages);
                        let that = this;
                        $.ajax({
                            type: "GET",
                            url: "getDakuan?curPage="+(this.dakuanCurPage+1)+'&username='+this.curProfile.username,
                            async: true,
                            success: function ( res ) {
                                that.dakuanList = res.data;
                                that.dakuanTotalPages = res.totalPages;
                                that.dakuanCurPage = res.curPage;
                            },
                            error: function (x, e) {

                            }
                        });
                    }
                },

                // 完成打款
                dakuanFinish: function () {
                    if ( this.curProfile.surplus_amount <= 0 ) {
                        return;
                    }
                    let that = this;
                    $.ajax({
                        type: "PUT",
                        url: "playMoney?surplus_amount="+this.curProfile.surplus_amount+"&username="+this.curProfile.username,
                        data: {},
                        async: true,
                        success: function ( res ) {
                            that.dakuanJumpPage(that.dakuanCurPage);
                            that.jumpPage(that.curPage);
                            $.ajax({
                                type: "GET",
                                url: "getCurAccount?username="+that.curProfile.username,
                                async: true,
                                success: function ( res ) {
                                    that.curProfile = res.data[0];
                                    if ( that.curProfile.user_type_enums == 'TWO' ) {
                                        $.ajax({
                                            type: "GET",
                                            url: "getUser?username="+that.curProfile.parent_user_name,
                                            async: true,
                                            success: function ( res ) {
                                                that.$set(that.curProfile, 'parent_user', true);
                                                that.curProfile.parent_user = res.data[0].name;

                                            },
                                            error: function (x, e) {

                                            }
                                        });
                                    }
                                },
                                error: function (x, e) {

                                }
                            });
                        },
                        error: function (x, e) {

                        }
                    });
                },

                showDetail: function ( idx ) {
                    this.curProfileIdx = idx;
                    this.curProfile = this.profileList[idx];
                    this.isShowProfileDetail = true;

                    let that = this;
                    // 获取提成记录
                    $.ajax({
                        type: "GET",
                        url: "getTicheng?curPage="+this.tichengCurPage+'&username='+this.curProfile.username,
                        async: true,
                        success: function ( res ) {
                            that.tichengList = res.data;
                            that.tichengTotalPages = res.totalPages;
                            that.tichengCurPage = res.curPage;
                        },
                        error: function (x, e) {

                        }
                    });

                    // 获取打款记录
                    $.ajax({
                        type: "GET",
                        url: "getDakuan?curPage="+this.dakuanCurPage+'&username='+this.curProfile.username,
                        async: true,
                        success: function ( res ) {
                            that.dakuanList = res.data;
                            that.dakuanTotalPages = res.totalPages;
                            that.dakuanCurPage = res.curPage;
                        },
                        error: function (x, e) {

                        }
                    });

                    if ( this.curProfile.user_type_enums == 'TWO' ) {
                        $.ajax({
                            type: "GET",
                            url: "getUser?username="+this.curProfile.parent_user_name,
                            async: true,
                            success: function ( res ) {
                                that.$set(that.curProfile, 'parent_user', true);
                                that.curProfile.parent_user = res.data[0].name;

                            },
                            error: function (x, e) {

                            }
                        });
                    }
                },

                // 搜索
                search: function () {
                    if ( !this.keywords ) {
                        this.getData();
                        return;
                    }
                    let that = this;
                    $.ajax({
                        type: "GET",
                        url: "search?keywords="+that.keywords,
                        async: true,
                        success: function ( res ) {
                            that.profileList = res.data;
                            that.totalPages = res.totalPages;
                            that.curPage = res.curPage;
                        },
                        error: function (x, e) {

                        }
                    });
                },

                // 获取数据
                getData: function () {
                    let that = this;
                    $.ajax({
                        type: "GET",
                        url: "getProfileData?curPage=1",
                        async: true,
                        success: function ( res ) {
                            that.profileList = res.data;
                            that.totalPages = res.totalPages;
                            that.curPage = res.curPage;
                        },
                        error: function (x, e) {

                        }
                    });
                }
            },
            created: function () {
                this.getData();
            },
            mounted: function () {
                $(document).ready(function () {
                    $('.i-checks').iCheck({
                        checkboxClass: 'icheckbox_square-green',
                        radioClass: 'iradio_square-green',
                    });
                });
            }
        })
    </script>
</body>

</html>